import React from 'react';
import { inject, observer } from 'mobx-react';
import { Spin, Button, Icon, Popover, Modal } from 'antd'
import { WeaDropdown, WeaTableEditable, WeaRichText, WeaUpload, WeaSearchGroup, WeaNewScroll, WeaTop, WeaTextarea, WeaBrowser, WeaAlertPage, WeaPopoverHrm } from 'ecCom';
import moment from 'moment';
import NewLinkeb from '../../public/newlinked/NewLinkeb';
import PlanDetailView from './PlanDetailView';
import TaskDetailDialog from './../task/TaskDetailDialog';
import * as Util from '../../util/Util.js';

const toJS = mobx.toJS;
const { confirm } = Modal;
const ButtonGroup = Button.Group;

@inject('planViewStore')
@observer
export default class PlanView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewHeight: this.getHeight(),
      resourceid: this.props.resourceid,
      detailContent: '',
    }
  }

  componentWillMount() {//一些初始化请求
    const { planViewStore } = this.props;
    let _this = this;
    planViewStore.initData({
      asktype: 'init',
      doback: function (data) {
        _this.initTableData(data);
      }
    });
  }

  getHeight() {
    return window.innerHeight - 40;
  }

  //拼装Table 表头 和 数据
  initTableData(data) {
    const { planViewStore } = this.props;
    //mainColumns summaryinColumns summaryoutColumns
    if (data.summarymap) {
      const list = data.summarymap.list;
      const totalwidth = Number(data.summarymap.totalwidth) + 1;
      planViewStore.mainColumns = [];
      for (let i = 0; i < list.length; i++) {
        let ele = list[i];
        let comtype = this.returnComtype(ele);
        let editType = data.canedit ? comtype : 'text'
        planViewStore.mainColumns.push({ name: ele.showname, width: (ele.showwidth / totalwidth * 100) + "%" });
        planViewStore.summaryinColumns.push({ title: ele.showname, dataIndex: ele.fieldname, width: (ele.showwidth / totalwidth * 100) + "%", key: ele.fieldname, com: [{ type: editType, key: ele.fieldname, minRows: '1' }] });
        planViewStore.summaryoutColumns.push({ title: ele.showname, dataIndex: ele.fieldname, width: (ele.showwidth / totalwidth * 100) + "%", key: ele.fieldname, com: [{ type: editType, key: ele.fieldname, minRows: '1' }] });
      }
      planViewStore.mainColumns.push({ name: "", width: (1 / totalwidth * 100) + "%" });
      planViewStore.summaryinColumns.push({
        title: <span></span>,
        dataIndex: 'customrender',
        width: (1 / totalwidth * 100) + "%",
        key: 'customrender',
        com: [
          {
            type: 'CUSTOM',
            key: 'customrender',
            render: (text, record, index, onEdit) => (
              <div>
                <span className="marginSpan" title="查看明细" onClick={() => this.viewDetail(text, record, index, onEdit, '1')}><i className="icon-coms-Detailed"></i></span>
                {data.createtask && <span className="marginSpan" title="创建任务" onClick={() => this.createTask(text, record, index, onEdit, '1')}><Icon type="plus" /></span>}
              </div>
            )
          }
        ],
      });
      planViewStore.summaryoutColumns.push({
        title: <span></span>,
        dataIndex: 'customrender',
        width: (1 / totalwidth * 100) + "%",
        key: 'customrender',
        com: [
          {
            type: 'CUSTOM',
            key: 'customrender',
            render: (text, record, index, onEdit) => (
              <div>
                <span className="marginSpan" title="查看明细" onClick={() => this.viewDetail(text, record, index, onEdit, '2')}><i className="icon-coms-Detailed"></i></span>
                {data.createtask && <span className="marginSpan" title="创建任务" onClick={() => this.createTask(text, record, index, onEdit, '2')}><Icon type="plus" /></span>}
                <span className="marginSpan" title="插入一行数据" onClick={() => this.refs.tableEditPo.doAdd()}><i className="icon-coms-Revoke"></i></span>
                <span className="marginSpan" title="添加到工作计划" onClick={() => this.addToTablePlan(record)} ><i className="icon-coms-positive-sequence"></i></span>
              </div>
            )
          }
        ],
      });
    }
    // planColumns  
    if (data.planmap) {
      const list = data.planmap.list;
      const totalwidth = Number(data.planmap.totalwidth) + 1;
      for (let i = 0; i < list.length; i++) {
        let ele = list[i];
        let comtype = this.returnComtype(ele);
        let editType = data.canedit ? comtype : 'text'
        planViewStore.planColumns.push({ title: ele.showname, dataIndex: ele.fieldname, width: (ele.showwidth / totalwidth * 100) + "%", key: ele.fieldname, com: [{ type: editType, key: ele.fieldname, minRows: '1' }] });
      }
      planViewStore.planColumns.push({
        title: <span></span>,
        dataIndex: 'customrender',
        width: (1 / totalwidth * 100) + "%",
        key: 'customrender',
        com: [
          {
            type: 'CUSTOM',
            key: 'customrender',
            render: (text, record, index, onEdit) => (
              <div>
                <span className="marginSpan" title="查看明细" onClick={() => this.viewDetail(text, record, index, onEdit, '3')}><i className="icon-coms-Detailed"></i></span>
                {data.createtask && <span className="marginSpan" onClick={() => this.createTask(text, record, index, onEdit, '3')} title="创建任务"><Icon type="plus" /></span>}
                <span className="marginSpan" title="插入一行数据" ><i className="icon-coms-Revoke" onClick={() => this.refs.tableEditP.doAdd()}></i></span>
              </div>
            )
          }
        ],
      });
    }
  }

  //返回comtype
  returnComtype(ele) {
    let comtype = "";
    if (ele.inputtype == '1') {
      comtype = 'INPUT'
    } else if (ele.inputtype == '2') {
      comtype = 'TEXTAREA'
    } else if (ele.inputtype == '3') {
      comtype = 'DATEPICKER'
    } else if (ele.inputtype == '4') {
      comtype = 'INPUTNUMBER'
    }
    if (ele.detailedit == false) {
      comtype = "text"
    }
    return comtype;
  }

  //创建任务
  createTask(text, record, index, onEdit, dataType) {
    if (record.name == undefined || record.name.length == 0) {
      Modal.warning({
        title: "提示",
        content: '请填写标题!',
      });
      return;
    }
    let _this = this;
    Modal.confirm({
      title: '信息确认',
      content: '确定创建任务？',
      onOk() {
        if (record.id.indexOf('wte') != -1) {
          _this.viewDetail("", record, "", "", dataType, "createTask");
        } else {
          _this.viewTask(record, dataType);
        }
      },
      onCancel() { },
    });
  }
  //弹出任务弹窗
  viewTask(record, dataType) {
    const { planViewStore } = this.props;
    const { viewHeight } = this.state;
    let begindate = "";
    let enddate = "";
    if (dataType == "1" || dataType == "2") {
      begindate = record.begindate2;
      enddate = record.enddate2;
    } else {
      begindate = record.begindate1;
      enddate = record.enddate1;
    }
    let _this = this;
    planViewStore.addTask({
      plandetailid: record.id, principalid: planViewStore.resourceid, taskName: record.name, begindate: begindate, enddate: begindate, doback: function (taskId) {
        let locationkey = new Date().getTime();
        _this.setState({ detailContent: <TaskDetailDialog detailKey={taskId} locationkey={locationkey} onlyClose={() => _this.closeDia()} style={{ width: 900, height: viewHeight - 50 }} visable={true} /> });
      }
    });
  }
  //查看明细 弹出明细弹窗
  viewDetail(text, record, index, onEdit, dataType, callType) {
    const { planViewStore } = this.props;
    let { category, resourceid, canedit } = planViewStore;
    delete record.fbdate;
    if (record.id.indexOf('wte') != -1) {
      record.id = "";
    }
    let _this = this;
    let detailData = "[" + JSON.stringify(record) + "]";
    planViewStore.saveDetailView({
      operation: "save_detail", resourceid: planViewStore.resourceid, plandetailid: record.id, dataType: dataType, detailData: detailData, doback: function (detailid) {
        if (callType == "createTask") {
          record.id = detailid;
          _this.viewTask(record, dataType);
        } else {
          _this.setState({ detailContent: <PlanDetailView detailid={detailid} category={category} datatype={dataType} canedit={canedit} resourceid={resourceid} visible={true} onClose={() => _this.closeDia()} /> });
        }
      }
    });
  }

  //回调关闭dialog
  closeDia() {
    this.setState({ detailContent: '' });
  }
  //添加到工作计划
  addToTablePlan(colData) {
    colData.id = 'wte_' + this.randomId(6);
    const { planViewStore } = this.props;
    planViewStore.planlist.push(colData);
  }

  //随机生成ID
  randomId(range) {
    let str = "",
      arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    for (let i = 0; i < range; i++) {
      let pos = Math.round(Math.random() * (arr.length - 1));
      str += arr[pos];
    }
    return str;
  }

  /**
   * 下拉框选择年份
   */
  selectYear = (year, data) => {
    const { planViewStore } = this.props;
    planViewStore.currentyear = year;
    this.getPlanDetail({ type1: planViewStore.type1, type2: planViewStore.type2, year: year, resourceid: this.setState.resourceid });
  }
  //WeaSearchGroup 收缩展开
  onVisibleChange(type, status) {
    const { planViewStore } = this.props;
    planViewStore[type] = status;
  }
  //点击月 或周 显示隐藏 月周显示区域
  changePlanTypeStatus() {
    const { planViewStore } = this.props;
    planViewStore.planTypeStatus = !planViewStore.planTypeStatus;
  }
  //点击document Div 其他区域隐藏
  documentClick(e) {
    const target = e.target;
    if ($(target).attr("id") != 'planTypeSpan') {
      const { planViewStore } = this.props;
      if (planViewStore.planTypeStatus) {
        planViewStore.planTypeStatus = false;
      }
    }
  }
  //切换 周报或月报
  changeplanType(type) {
    const { planViewStore } = this.props;
    planViewStore.planType = type;
    this.getPlanDetail({ type1: type, type2: planViewStore.type2, year: planViewStore.currentyear, resourceid: this.setState.resourceid });
  }
  //选择悬浮框 月份 或者周
  selectTimeType(type1, index) {
    const { planViewStore } = this.props;
    planViewStore.type2 = index + 1;
    this.getPlanDetail({ type1: type1, type2: index + 1, year: planViewStore.currentyear, resourceid: this.setState.resourceid });
  }
  //左右切换周 或 月
  switchTime(type, optype) {
    const { planViewStore } = this.props;
    let askValue = false;
    if (type == '1') {
      if (optype == 'left' && planViewStore.monthClickL) {
        planViewStore.type2 = Number(planViewStore.type2) - 1;
        if (planViewStore.type2 <= 1) {
          planViewStore.monthClickL = false;
        }
        planViewStore.monthClickR = true;
        askValue = true;
      } else if (optype == 'right' && planViewStore.monthClickR) {
        planViewStore.type2 = Number(planViewStore.type2) + 1;
        if (planViewStore.type2 >= 12) {
          planViewStore.monthClickR = false;
        }
        planViewStore.monthClickL = true;
        askValue = true;
      }
    } else if (type == '2') {
      if (optype == 'left' && planViewStore.weekClickL) {
        planViewStore.type2 = Number(planViewStore.type2) - 1;
        if (planViewStore.type2 <= 1) {
          planViewStore.weekClickL = false;
        }
        planViewStore.weekClickR = true;
        askValue = true;
      } else if (optype == 'right' && planViewStore.weekClickR) {
        planViewStore.type2 = Number(planViewStore.type2) + 1;
        if (planViewStore.type2 >= planViewStore.weekList[planViewStore.weekList.length - 1].week) {
          planViewStore.weekClickR = false;
        }
        planViewStore.weekClickL = true;
        askValue = true;
      }
    }
    if (askValue) {
      this.getPlanDetail({ type1: type, type2: planViewStore.type2, year: planViewStore.currentyear, resourceid: this.setState.resourceid });
    }
  }
  //重新编写
  doReset() {
    let _this = this;
    Modal.confirm({
      title: '信息确认',
      content: '确定重新编写总结计划？',
      onOk() {
        const { planViewStore } = _this.props;
        planViewStore.resetPlan({ planid: planViewStore.planid });
      },
      onCancel() { },
    });
  }
  //提交
  doSubmit() {
    let _this = this;
    Modal.confirm({
      title: '信息确认',
      content: '确定提交工作总结？',
      onOk() {
        const { planViewStore } = _this.props;
        let paramsData = _this.getDetailMsg("submit");
        planViewStore.saveOrSubmitPlan(paramsData);
      },
      onCancel() { },
    });
  }
  //保存
  doSave() {
    let _this = this;
    Modal.confirm({
      title: '信息确认',
      content: '提示：未填写标题的明细项将不会保存，确定继续执行操作？',
      onOk() {
        const { planViewStore } = _this.props;
        let paramsData = _this.getDetailMsg("save");
        planViewStore.saveOrSubmitPlan(paramsData);
      },
      onCancel() { },
    });
  }
  //删除
  doDel() {
    let _this = this;
    Modal.confirm({
      title: '信息确认',
      content: '确定删除此总结计划？',
      onOk() {
        const { planViewStore } = _this.props;
        planViewStore.deletePlan({ planid: planViewStore.planid, year: planViewStore.currentyear, type1: planViewStore.planType, type2: planViewStore.type2, resourceid: planViewStore.resourceid });
      },
      onCancel() { },
    });
  }
  //批准
  doApprove() {
    let _this = this;
    Modal.confirm({
      title: '信息确认',
      content: '确定批准此计划报告？',
      onOk() {
        const { planViewStore } = _this.props;
        planViewStore.auditPlan({ planid: planViewStore.planid, operation: 'approve' });
      },
      onCancel() { },
    });
  }
  //退回
  doReturn() {
    let _this = this;
    Modal.confirm({
      title: '信息确认',
      content: '确定退回此计划报告？',
      onOk() {
        const { planViewStore } = _this.props;
        planViewStore.auditPlan({ planid: planViewStore.planid, operation: 'return' });
      },
      onCancel() { },
    });
  }

  getDetailMsg(operation) {
    const { planViewStore } = this.props;
    let summaryout = planViewStore.summaryout;
    summaryout.length > 0 && summaryout.map((element, index) => {
      if (element['id'].indexOf('wte') != -1) {
        element['id'] = "";
      }
      delete element['fbdate'];
      delete element['input'];
    })
    let planlist = planViewStore.planlist;
    planlist.length > 0 && planlist.map((element, index) => {
      if (element['id'].indexOf('wte') != -1) {
        element['id'] = "";
      }
      delete element['fbdate'];
      delete element['input'];
    })
    let paramsData = {
      resourceid: planViewStore.resourceid,
      planid: planViewStore.planid,
      operation: operation,
      planname: planViewStore.planname,
      auditids: planViewStore.auditids,
      year: planViewStore.currentyear,
      type1: planViewStore.planType,
      type2: planViewStore.type2,
      remark: planViewStore.remark,
      fileids: planViewStore.fileids,
      programid: planViewStore.programid,
      summaryin: JSON.stringify(planViewStore.summaryin),
      summaryout: JSON.stringify(summaryout),
      planlist: JSON.stringify(planlist),
    };
    return paramsData;
  }

  //获取报告数据 
  getPlanDetail(params) {
    const { planViewStore } = this.props;
    planViewStore.getPlanDetail(params);
  }

  transfStr = (name = '', ids = '', list = [], type = '') => {
    let str = '';
    list.map(item => {
      if (name === 'Upload' && type === 'image') {
        str += '<img class="formImgPlay" src="' + item.filelink + '" onclick="ecCom.WeaRichText.playImg(this)" data-imgsrc="' + (item.loadlink || item.filelink) + '" />'
      }
      if (name === 'Upload' && type === 'file') {
        str += `<a href='${item.filelink}' unselectable='off' contenteditable='false' style='cursor:pointer;text-decoration:underline !important;margin-right:8px'>${item.filename}</a>${item.showLoad ? "&nbsp;<a href='javascript:void(0)' unselectable='off' contenteditable='false' href='${item.loadlink}' style='cursor:pointer;text-decoration:underline;margin-right:8px'>下载(" + item.filesize + ")</a>" : ""}<br>`;
      }
    })
    return str
  }
  //失焦保存
  textonBlur(type, text) {
    const { planViewStore } = this.props;
    planViewStore[type] = text;
  }
  /**上传附件 */
  uploadChange(ids, list) {
    const { planViewStore } = this.props;
    if (ids.length > 0) {
      let newAddFileids = '';
      for (let i = 0; i < list.length; i++) {
        let fileA = {};
        if (planViewStore.fileids.indexOf(',' + ids[i] + ',') == -1) {
          newAddFileids += ids[i] + ',';
          planViewStore.fileids += ids[i] + ',';
          fileA.id = ids[i];
          fileA.name = list[i].filename;
          planViewStore.filearry.push(fileA);
        }
      }
    }
  }
  renderTitleSummary() {
    const { planViewStore } = this.props;
    const { titleSummary } = planViewStore;
    return (
      <WeaTop
        title={titleSummary}
        icon={<i className='icon-coms-Bar' />}
        iconBgcolor='#55d2d4'
      />
    );
  }
  renderTitlePlan() {
    const { planViewStore } = this.props;
    const { titlePlan } = planViewStore;
    return (
      <WeaTop
        title={titlePlan}
        icon={<i className='icon-coms-Planning-tasks' />}
        iconBgcolor='#CD682B'
      />
    );
  }
  //添加一行表格数据
  willAdd(datas, addData, type) {
    const { planViewStore } = this.props;
    planViewStore[type] = datas;
  }
  //删除表格数据
  willDelete(datas, keys, type) {
    new Promise((resolve, reject) => {
      const { planViewStore } = this.props;
      confirm({
        content: `确认删除 id 为 ${keys}的数据行吗? `,
        onOk: () => {
          resolve(true);
          let list = planViewStore[type];
          list.map((element, index) => {
            for (let i = 0; i < keys.length; i++) {
              if (element.id == keys[i]) {
                planViewStore[type].remove(element);
              }
            }
          })
        },
        onCancel: () => {
          resolve(false);
        },
      })
    })
  }
  //复制单元格
  willCopy(datas, selectedKeys, copyDatas, type) {
    const { planViewStore } = this.props;
    planViewStore[type] = datas;
  }
  //编辑单元格回调
  willEdit(datas, result, type) {
    let tip = "";
    let days = 0;
    let flag = false;
    const { key, record, value, index } = result;
    if (key === 'begindate1' && record.enddate1 != "") {
      days = Util.DateDiffDays(value, record.enddate1);
      flag = true;
      if (days < 0) {
        tip = "计划开始日期不能大于计划结束日期!";
        record.days1 = 0;
        record.begindate1 = "";
      } else {
        record.days1 = days;
        record.begindate1 = value;
      }
    } else if (key === 'enddate1' && record.begindate1 != "") {
      days = Util.DateDiffDays(record.begindate1, value);
      flag = true;
      if (days < 0) {
        tip = "计划结束日期不能小于计划开始日期!";
        record.days1 = 0;
        record.enddate1 = "";
      } else {
        record.days1 = days;
        record.enddate1 = value;
      }
    } else if (key === 'begindate2' && record.enddate2 != "") {
      days = Util.DateDiffDays(value, record.enddate2);
      flag = true;
      if (days < 0) {
        tip = "实际开始日期不能大于计划结束日期!";
        record.days2 = 0;
        record.begindate2 = "";
      } else {
        record.days2 = days;
        record.begindate2 = value;
      }
    } else if (key === 'enddate2' && record.begindate2 != "") {
      days = Util.DateDiffDays(record.begindate2, value);
      flag = true;
      if (days < 0) {
        tip = "实际结束日期不能小于计划开始日期!";
        record.days2 = 0;
        record.enddate2 = "";
      } else {
        record.days2 = days;
        record.enddate2 = value;
      }
    }
    if (flag) {
      if (tip.length > 0) {
        Modal.warning({
          title: "提示",
          content: tip,
        });
      }
      datas[index] = record;
      const { planViewStore } = this.props;
      planViewStore[type] = datas;
    } else {
      const { planViewStore } = this.props;
      planViewStore[type] = datas;
    }

  }
  changeStatus(type, status) {
    const { planViewStore } = this.props;
    planViewStore[type] = status;
    if (type == 'saveButtonStatus' && status == false) {
      planViewStore.minRows = 2;
    } else if (type == 'saveButtonStatus' && status == true) {
      planViewStore.minRows = 5;
    }
  }
  //添加共享设置
  onChangeBrowser(ids, names, datas) {
    const { planViewStore } = this.props;
    let idsArray = ids.split(',');
    let namesArray = names.split(',');
    let hasArray = planViewStore.shareidsList;
    let hasIdsArray = [];
    for (let j = 0; j < hasArray.length; j++) {
      hasIdsArray.push(hasArray[j].id);
    }
    for (let i = 0; i < idsArray.length; i++) {
      if (this.IsInArray(hasIdsArray, idsArray[i]) == -1) {
        hasIdsArray.push(idsArray[i]);
        planViewStore.shareidsList.push({ id: idsArray[i], name: namesArray[i] });
      }
    }
    Modal.confirm({
      title: '信息确认',
      content: '确认保存共享设置？',
      onOk() {
        planViewStore.setPlanShare({ planid: planViewStore.planid, shareids: hasIdsArray.join(",") });
      },
      onCancel() { },
    });

  }
  IsInArray(arr, val) {
    const testStr = ',' + arr.join(",") + ",";
    return testStr.indexOf("," + val + ",");
  }
  onLinkClick(id, name, type, typeIds, typeArray) {
    const { planViewStore } = this.props;
    let hasIdsArray = [];
    if (type == 2) {
      //对array进行处理
      if (typeIds != "") {
        let vals = planViewStore[typeIds];
        if (vals.length > 0 && !this.startWith(vals, ',')) {
          vals = ',' + vals;
        }
        if (vals.length > 0 && !this.endWith(vals, ',')) {
          vals = vals + ',';
        }
        let _index = vals.indexOf("," + id + ",")
        if (_index > -1 && id != "") {
          vals = vals.substring(0, _index + 1) + vals.substring(_index + (id + "").length + 2);
          if (vals == ',') {
            vals = '';
          }
          planViewStore[typeIds] = vals;
        }
      } else {
        let hasArray = planViewStore[typeArray];
        for (let j = 0; j < hasArray.length; j++) {
          hasIdsArray.push(hasArray[j].id);
        }
        if (this.IsInArray(hasIdsArray, id) != -1) {
          hasIdsArray.splice(hasIdsArray.indexOf(id), 1);
        }
      }
      let array = planViewStore[typeArray];
      array.map((elemnet, index) => {
        if (elemnet.id == id) {
          planViewStore[typeArray].remove(elemnet);
        }
      });

      if (typeArray == "shareidsList") {
        Modal.confirm({
          title: '信息确认',
          content: '确认保存共享设置？',
          onOk() {
            planViewStore.setPlanShare({ planid: planViewStore.planid, shareids: hasIdsArray.join(",") });
          },
          onCancel() { },
        });
      }
    }
  }
  startWith(str, dim) {
    var reg = new RegExp("^" + dim);
    return reg.test(str);
  }
  endWith(str, dim) {
    var reg = new RegExp(dim + "$");
    return reg.test(str);
  }
  //加载更多操作日志
  morePlanLog() {
    const { planViewStore } = this.props;
    planViewStore.getPlanLog({ lastid: planViewStore.lastid, lastcount: planViewStore.lastcount, planid: planViewStore.planid });
  }
  //保存反馈意见
  saveFb() {
    const { planViewStore } = this.props;
    planViewStore.addPlanExchange({ planid: planViewStore.planid, content: planViewStore.fbContent });
  }
  render() {
    const { planViewStore } = this.props;
    const { viewHeight, detailid, detailContent } = this.state;
    const { statusAlert, currentyear, yeardown, mainColumns, summaryinColumns, summaryoutColumns, planColumns, summaryout, summaryin, titlePlan, monthList, weekList, spinning, saveButtonStatus, minRows, planType, currentmonth, currentweek, monthClickL, monthClickR, weekClickL, weekClickR
      , resourceid, resourceName, planname, canmodel, type2, auditList, enddate, planstatus, canedit, editshare, canaudit, candel, canreset, planTypeStatus, planlist, remark, category, maxsize, fblist, shareidsList, pshareidsList, emptyArray, lastcount, listLog, filearry
      , fileids, isweek, ismonth, isperformance, fbContent, planid } = planViewStore;
    return (
      <div className="workrelate-plan-main" onClick={(e) => this.documentClick(e)}>
        <Spin spinning={spinning}>
          <WeaNewScroll height={viewHeight} style={{ padding: '0px 10px' }}>
            <div className="top-contain">
              <div className="topContain-left">
                <span><WeaDropdown currentKey={currentyear} datas={yeardown} onSelect={this.selectYear} /></span>
                <span className="plan-type">
                  <ButtonGroup>
                    {isweek && <Button type={planType == '2' ? 'primary' : 'ghost'} onClick={() => this.changeplanType('2')}>周报</Button>}
                    {ismonth && <Button type={planType == '1' ? 'primary' : 'ghost'} onClick={() => this.changeplanType('1')}>月报</Button>}
                  </ButtonGroup>
                  {planType == '2' ?
                    <span style={{ position: 'relative' }}>
                      <span className="selectcontent"><Icon type="left" className={weekClickL && 'cursorPointer'} onClick={() => this.switchTime('2', 'left')} /><span className="selectcontent-span" id="planTypeSpan" onClick={() => this.changePlanTypeStatus()}>{type2}周</span><Icon className={weekClickR && 'cursorPointer'} onClick={() => this.switchTime('2', 'right')} type="right" /></span>
                      <div className="layer-plantype" style={planTypeStatus ? { display: 'block' } : { display: 'none' }}>
                        <div className="layer-plantype-content">
                          {
                            weekList && weekList.length > 0 && weekList.map((element, index) => {
                              return (
                                <span onClick={() => this.selectTimeType('2', index)} title={element.title} className={(planType == '2' && index + 1 == type2 && ' selectTime') || (planType == '2' && index + 1 == currentweek && ' currentTime')}>第{element.week}周</span>
                              );
                            })
                          }
                        </div>
                      </div>
                    </span> :
                    <span style={{ position: 'relative' }}>
                      <span className="selectcontent"><Icon type="left" className={monthClickL && 'cursorPointer'} onClick={() => this.switchTime('1', 'left')} /><span className="selectcontent-span" id="planTypeSpan" onClick={() => this.changePlanTypeStatus()}>{type2}月</span><Icon className={monthClickR && 'cursorPointer'} onClick={() => this.switchTime('1', 'right')} type="right" /></span>
                      <div className="layer-plantype" style={planTypeStatus ? { display: 'block' } : { display: 'none' }}>
                        <div className="layer-plantype-content">
                          {
                            monthList && monthList.length > 0 && monthList.map((element, index) => {
                              return (
                                <span onClick={() => this.selectTimeType('1', index)} className={(planType == '1' && index + 1 == type2 && ' selectTime') || (planType == '1' && index + 1 == currentmonth && ' currentTime')}>{element}月</span>
                              );
                            })
                          }
                        </div>
                      </div>
                    </span>}
                </span>
                <span className="user-span"><WeaPopoverHrm /><a href='javaScript:void(0)' onClick={e => { openhrm(resourceid); window.pointerXY(e) }} title={resourceName} >{resourceName}</a><span className="plan-type">{planname}</span></span>
                {canmodel && <font className="model-href" title="您可自定义计划报告模板"><a href="##" target="_blank"> [定义模板]</a></font>　}
              </div>
              <div className="topContain-right">
                <div>
                  <div>
                    {planstatus == 0 && <span className="draft-span">草稿</span>}
                    {planstatus == 1 && <span className="approval-span">审批中</span>}
                    {planstatus == 2 && <span className="back-span">退回</span>}
                    {planstatus == 3 && <span className="completed-span">已完成</span>}
                    {planstatus == 6 && <span className="past-span">已过期</span>}
                    {planstatus == 1 &&
                      <span>
                        <span className="marginLog">待审批人：</span>
                        <span>
                          {
                            auditList && auditList.length > 0 && auditList.map((element, index) => {
                              return <a href='javaScript:void(0)' style={{ marginLeft: '2px' }} onClick={e => { openhrm(element.id); window.pointerXY(e) }} title={element.name} >{element.name}</a>
                            })
                          }
                        </span>
                        <span className="marginLog">截止日期：{enddate}</span>
                      </span>
                    }
                    {planstatus != 1 && planstatus != 3 && <span className="plan-enddate">提交截止日期 : {enddate}</span>}
                    <span>
                      <span className="plan-type">
                        {canreset && <Button className="plan-type" title="重新编写计划报告" onClick={() => this.doReset()}>重新编写</Button>}
                        {canedit && <span><Button className="plan-type" title="保存为草稿" onClick={() => this.doSave()}>保存</Button><Button className="plan-type" onClick={() => this.doSubmit()} title="保存并提交">提交</Button></span>}
                        {candel && <Button className="plan-type" title="删除计划报告" onClick={() => this.doDel()}>删除</Button>}
                        {canaudit && <span><Button className="plan-type" title="批准计划报告" onClick={() => this.doApprove()}>批准</Button><Button className="plan-type" title="退回计划报告" onClick={() => this.doReturn()}>退回</Button></span>}
                        {editshare &&
                          <WeaBrowser
                            replaceDatas={emptyArray}
                            type={17}
                            customized
                            inputStyle={{ width: 100 }}
                            onChange={(ids, names, datas) => this.onChangeBrowser(ids, names, datas)}
                            isSingle={false}
                          >
                            <Button className="plan-type" title="共享计划报告">共享</Button>
                          </WeaBrowser>
                        }
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            {statusAlert != 1 ?
              <WeaAlertPage>
                <div className="color-black">
                  {statusAlert}
                </div>
              </WeaAlertPage> :
              <div className="summary-contain">
                <WeaSearchGroup style={{ paddingLeft: '0px', paddingRight: '5px' }} showGroup={true} title={this.renderTitleSummary()}>
                  <div className="summary-main">
                    <div className="columns-title">
                      <table style={{ width: '100%' }}><tr>
                        {
                          mainColumns && mainColumns.length > 0 && mainColumns.map((element, index) => {
                            return (
                              <td style={{ width: element.width, minWidth: element.width }}>{element.name}</td>
                            );
                          })
                        }
                      </tr></table>
                    </div>
                    <WeaSearchGroup title='计划内' showGroup={true} >
                      <WeaTableEditable
                        showTitle={false}
                        draggable={true}
                        pushTitleIntoHeader={true}
                        columns={summaryinColumns}
                        datas={toJS(summaryin)}
                      />
                    </WeaSearchGroup>
                    <WeaSearchGroup title='计划外' showGroup={true}  >
                      <WeaTableEditable
                        ref='tableEditPo'
                        buttonsType='inline'
                        showTitle={canedit}
                        viewAttr={false}
                        draggable={true}
                        pushTitleIntoHeader={true}
                        columns={summaryoutColumns}
                        datas={toJS(summaryout)}
                        willAdd={(datas, addData) => this.willAdd(datas, addData, "summaryout")}
                        willDelete={(datas, keys) => this.willDelete(datas, keys, "summaryout")}
                        willEdit={(datas, result) => this.willEdit(datas, result, "summaryout")}
                        willCopy={(datas, selectedKeys, copyDatas) => this.willCopy(datas, selectedKeys, copyDatas, "summaryout")}
                      />
                    </WeaSearchGroup>
                    <WeaSearchGroup title='工作总体分析' showGroup={true} >
                      <div dangerouslySetInnerHTML={{ __html: remark }} />
                      {canedit &&
                        <WeaRichText
                          value={remark}
                          ckConfig={{
                            toolbar: [
                              { name: 'document', items: ['Source'] },
                              { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                              { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                              { name: 'colors', items: ['TextColor'] },
                              { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                              { name: 'insert', items: ['Image', 'Table', 'Smiley'] }
                            ],
                            height: 200,
                            autoGrow_minHeight: 200,
                            autoGrow_maxHeight: 200,
                            uploadUrl: '/api/develop/docs/uploadimage',
                            resize_enabled: false,
                          }}
                          extentsConfig
                          onBlur={(text) => this.textonBlur('remark', text)}
                          onToolsChange={(name, ids, list, type) => this.transfStr(name, ids, list, type)}
                        />}
                    </WeaSearchGroup>
                  </div>
                </WeaSearchGroup>
                <WeaSearchGroup style={{ paddingLeft: '0px', paddingRight: '5px' }} showGroup={true} title={this.renderTitlePlan()} >
                  <WeaTableEditable
                    ref='tableEditP'
                    buttonsType='inline'
                    showTitle={canedit}
                    columns={planColumns}
                    datas={toJS(planlist)}
                    willAdd={(datas, addData) => this.willAdd(datas, addData, "planlist")}
                    willDelete={(datas, keys) => this.willDelete(datas, keys, "planlist")}
                    willEdit={(datas, result) => this.willEdit(datas, result, "planlist")}
                    willCopy={(datas, selectedKeys, copyDatas) => this.willCopy(datas, selectedKeys, copyDatas, "planlist")}
                  />
                </WeaSearchGroup>
                <div className="summary-title" style={{ clear: 'both', paddingTop: '65px' }}>
                  <div style={{ width: '49%', float: 'left' }}>
                    <WeaTop
                      title={<span>相关附件</span>}
                      icon={<i className='icon-coms-currency-Enclosure' />}
                      iconBgcolor='#0080FF'
                    />
                    <div className="tag-content">
                      <span className="line-span"><NewLinkeb onLinkClick={(id, name, type) => this.onLinkClick(id, name, type, "fileids", 'filearry')} linkurl='' linkdatas={filearry} hasdel={canedit} /></span>
                      {canedit && <WeaUpload
                        uploadUrl={'/api/workrelate/common/uploadDoc?category=' + category}
                        category={category ? category : ''}
                        maxUploadSize={maxsize}
                        viewAttr='1'
                        showClearAll={false}
                        onChange={(ids, list) => this.uploadChange(ids, list)}
                      />}
                    </div>
                  </div>
                  {isperformance &&
                    <div style={{ width: '49%', float: 'right' }}>
                      <WeaTop
                        title={<span>绩效考核</span>}
                        icon={<i className='icon-coms-link' />}
                        iconBgcolor='#FF00FF'
                      />
                      <div className="tag-content">
                        <span className="tag-contentHref"><a href="##" target="_blank">张欢{currentyear}年{type2}月目标绩效考核</a></span>
                        {/* <span className="tag-contentHref"><a href="##" target="_blank">成长足迹</a></span>
                        <span className="tag-contentHref"><a href="##" target="_blank">人员状态</a></span> */}
                      </div>
                    </div>}
                </div>
                {planid != "" &&
                  <div style={{ clear: 'both', paddingTop: '30px' }}>
                    <div style={{ width: '49%', float: 'left' }}>
                      <div>
                        <WeaTop
                          title={<span>意见反馈</span>}
                          icon={<i className='icon-coms-message-o' />}
                          iconBgcolor='#808080'
                        />
                        <div className="detail-content" onBlur={() => this.changeStatus('saveButtonStatus', false)}>
                          <WeaTextarea minRows={minRows} maxRows={5} value={fbContent} onChange={(value) => this.textonBlur('fbContent', value)} onFocus={() => this.changeStatus('saveButtonStatus', true)} />
                          {saveButtonStatus && <div ><Button onMouseDown={() => this.saveFb()}>保存</Button></div>}
                          <div>
                            {fblist && fblist.length > 0 && fblist.map((element, index) => {
                              return (
                                <div className="detail-fb">
                                  <a href='javaScript:void(0)' onClick={e => { openhrm(element.hrmid); window.pointerXY(e) }} title={element.hrmname} >{element.hrmname}</a>
                                  <span className="marginLog">{element.datetime}</span>
                                  <div>{element.content}</div>
                                </div>)
                            })}
                          </div>
                        </div>
                      </div>
                      <div style={{ clear: 'both', paddingTop: '20px' }}  >
                        <WeaTop
                          title={<span>报告共享</span>}
                          icon={<i className='icon-coms-Batch-sharing' />}
                          iconBgcolor='#808080'
                        />
                        <div className={canedit ? "share-content" : "share-content1"}>
                          <span className='line-span'><NewLinkeb _width='20' linkurl='/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/' onLinkClick={(id, name, type) => this.onLinkClick(id, name, type, "", "shareidsList")} linkdatas={shareidsList} hasdel={canedit} /></span>
                          <span className="bggx-edit">
                            <WeaBrowser
                              replaceDatas={emptyArray}
                              type={17}
                              inputStyle={{ width: 100 }}
                              onChange={(ids, names, datas) => this.onChangeBrowser(ids, names, datas)}
                              isSingle={false}
                            />
                          </span>
                        </div>
                        {pshareidsList.length > 0 && <div style={{ clear: 'both' }}><span className='line-span' style={{ height: '30px', lineHeight: '30px' }}>默认共享：</span><span className='line-span'><NewLinkeb _width='20' linkurl='/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/' linkdatas={pshareidsList} hasdel={false} /></span></div>}
                      </div>
                    </div>
                    <div style={{ width: '49%', float: 'right' }}>
                      <div className="tag-content">
                        <WeaTop
                          title={<span>操作日志</span>}
                          icon={<i className='icon-coms-Print-log' />}
                          iconBgcolor='#808080'
                        />
                        <div className="detail-content">
                          {
                            listLog && listLog.length > 0 && listLog.map((element, index) => {
                              return <div>
                                <span><a href='javaScript:void(0)' onClick={e => { openhrm(element.operator); window.pointerXY(e) }} title={element.operatorname} >{element.operatorname}</a></span>
                                <span className="marginLog">{element.operatedate}</span>
                                <span className="marginLog">{element.operatetype}</span>
                              </div>
                            })
                          }
                          {lastcount > 0 && <div className="moreButton" onClick={() => this.morePlanLog()}>加载更多...</div>}
                        </div>
                      </div>
                    </div>
                  </div>}
              </div>
            }
            {detailContent}
          </WeaNewScroll>
        </Spin>
      </div>
    )
  }
};